﻿@{
    ViewBag.Title = "InformationItemEdit";
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

<link rel="stylesheet" type="text/css" href="/Scripts/wangEditor/css/wangEditor.min.css">
<script type="text/javascript" src='/Scripts/wangEditor/js/wangEditor.min.js'></script>

<style>
    .wangEditor-container .wangEditor-txt p,
    .wangEditor-container .wangEditor-txt h1,
    .wangEditor-container .wangEditor-txt h2,
    .wangEditor-container .wangEditor-txt h3,
    .wangEditor-container .wangEditor-txt h4,
    .wangEditor-container .wangEditor-txt h5 {
        margin: 0px 0;
        line-height: 1.8;
    }
</style>

<style type="text/css">
    .divImageMaterialContainer {
        width: 170px;
        float: left;
        margin-right: 10px;
        margin-top: 0px;
        background-color: #FFF;
    }

    .tableImageMaterialContainer {
        width: 100%;
        border-collapse: collapse;
        border: solid #E7E7EB;
        border-width: 1px 0 0 1px;
    }

        .tableImageMaterialContainer td {
            border: 1px solid #E7E7EB;
        }
</style>

<script>
    var _informationId = getQueryString("informationId");
    var _categoryId = getQueryString("categoryId");

    var _mode = "create";//modify
    var _validator;
    var _data = null;

    var _editor;

    $(document).ready(function () {
        $("[keyenter]").keypress(function (e) {
            if (e.keyCode == 13) {
                save();
            }
        });

        $("#txtImageUrl").blur(function () {
            loadImage();
        });

        _validator = $("#form").validate({
            onfocusout: false,
            onkeyup: false,
            showErrors: showValidationErrors,
            rules: {
                "txtName": "required"
            },
            messages: {
                "txtName": "请输入信息名称；"
            }
        });

        //_editor = $('#txtDescription').wangEditor({
        //    'menuConfig': [
        //     ['viewSourceCode'],
        //        ['bold', 'underline', 'italic', 'foreColor', 'backgroundColor', 'strikethrough'],
        //        ['blockquote', 'fontFamily', 'fontSize', 'setHead', 'list', 'justify'],
        //        ['createLink', 'unLink', 'insertTable'],
        //        ['insertLocation'],
        //        ['undo', 'redo', 'fullScreen']
        //    ]
        //});
        _editor = new wangEditor('divDescriptionEditor');
        _editor.config.menus = [
        'source',
        '|', 'bold', 'underline', 'italic', 'strikethrough', 'eraser', 'forecolor', 'bgcolor',
        '|', 'quote', 'fontfamily', 'fontsize', 'head', 'unorderlist', 'orderlist', 'alignleft', 'aligncenter', 'alignright',
        '|', 'link', 'unlink', 'table',
        '|', 'undo', 'redo', 'fullscreen'
        ];
        _editor.create();

        load();
    });

    function load() {
        var id = getQueryString("id");
        if (id == undefined || id == "") {
            return;
        }

        _mode = "modify";
        $("#spanTitle").html("修改");
        $("#btnRemove").show();

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        $.ajax({
            url: "/Api/Information/GetInformationItem?id=" + id,
            type: "POST",
            dataType: "json",
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    _data = data.Data;
                    $("#txtId").val(_data.Id);
                    $("#txtName").val(_data.Name);
                    $("#txtImageUrl").val(_data.Image);
                    $("#txtPhoneNumber").val(_data.PhoneNumber);
                    $("#txtIntroduction").val(_data.Introduction);
                    _editor.$txt.html(_data.Description);
                    loadImage();
                    loadDetailImageList();

                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function save() {
        if (_validator.form() == false) {
            return;
        }

        var loadLayerIndex = layer.load(0, {
            shade: [0.2, '#fff']
        });

        var url = "/Api/Information/CreateInformationItem";
        if (_mode == "modify") {
            url = "/Api/Information/UpdateInformationItem";
        }

        if (_data == undefined || _data == null) {
            _data = new Object();
        }

        _data.Information = _informationId;
        _data.Category = _categoryId;
        _data.Name = $("#txtName").val();
        _data.Image = $("#txtImageUrl").val();
        _data.PhoneNumber = $("#txtPhoneNumber").val();
        _data.Introduction = $("#txtIntroduction").val();
        _data.Description = _editor.$txt.html();

        //if (_data.ImageList == undefined || _data.ImageList == null) {
        //    _data.ImageList = new Array();
        //}

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: JSON.stringify(_data),
            success: function (data, status, jqXHR) {
                layer.close(loadLayerIndex);
                if (data.Success) {
                    var index = parent.layer.getFrameIndex(window.name);
                    if (_mode == "create") {
                        parent.loadDataAndCloseLayer(index);
                    } else {
                        parent.loadDataOnPageAndCloseLayer(index);
                    }
                } else {
                    layerAlert(data.Message);
                }
            },
            error: function (xmlHttpRequest) {
                layer.close(loadLayerIndex);
                alert("Error: " + xmlHttpRequest.status);
            }
        });
    }

    function removeData() {
        var id = $("#txtId").val();
        if (id == undefined || id == "") {
            return;
        }

        var msg = "是否确认删除？"

        var confirmLayerIndex = layer.confirm(msg, {
            btn: ['确认', '取消'], //按钮
            shade: [0.4, '#393D49'],
            title: false,
            closeBtn: false,
            shift: _layerShift
        }, function () {
            layer.close(confirmLayerIndex);

            var loadLayerIndex = layer.load(0, {
                shade: [0.2, '#fff']
            });

            $.ajax({
                url: "/Api/Information/RemoveInformationItem?id=" + id,
                type: "POST",
                dataType: "json",
                success: function (data, status, jqXHR) {
                    if (data.Success) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.loadDataOnPageAndCloseLayer(index);

                    } else {
                        layer.closeAll();
                        layerAlert(data.Message);
                    }
                },
                error: function (xmlHttpRequest) {
                    layer.closeAll();
                    alert("Error: " + xmlHttpRequest.status);
                }
            });
        });
    }

    function cancel() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    function loadImage() {
        $("#image").attr("src", $("#txtImageUrl").val());
    }

    function uploadFile() {
        __showFileUpload(getUploadResult);
    }

    function getUploadResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        $("#txtImageUrl").val(url);
        loadImage();
    }

    function removeImage() {
        $("#txtImageUrl").val("");
        loadImage();
    }

    //详细图片

    function uploadDetailImage() {
        __showFileUpload(getUploadDetailImageResult);
    }

    function getUploadDetailImageResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;

        var imageListItem = new Object();
        imageListItem.Id = result.Data.Id;
        imageListItem.Url = url;

        if (_data == undefined || _data == null) {
            _data = new Object();
        }

        if (_data.ImageList == undefined || _data.ImageList == null) {
            _data.ImageList = new Array();
        }

        _data.ImageList[_data.ImageList.length] = imageListItem;

        loadDetailImageList();
    }

    function loadDetailImageList() {

        if (_data == undefined || _data == null || _data.ImageList == undefined || _data.ImageList == null) {
            document.getElementById('divImageListContainer').innerHTML = "";
            return;
        }

        var gettpl = document.getElementById('imageListTemplate').innerHTML;
        laytpl(gettpl).render(_data.ImageList, function (html) {
            document.getElementById('divImageListContainer').innerHTML = html;
        });
    }

    function removeDetailImageItem(id) {

        for (var i = 0; i < _data.ImageList.length; i++) {
            if (_data.ImageList[i].Id == id) {
                _data.ImageList.splice(i, 1);
                break;
            }
        }

        loadDetailImageList();
    }

    ///////

    ////详细图片

    function uploadDescriptionFile() {
        __showFileUpload(getUploadDescriptionFileResult);
    }

    function getUploadDescriptionFileResult(fileServiceAddress, result) {
        var url = fileServiceAddress + result.Data.StoreFilePath;
        _editor.$txt.append("<img src='" + url + "' style='max-width:100%' />");
    }

    function closeAllLayer() {
        layer.closeAll();
    }

</script>

<script id="imageListTemplate" type="text/html">

    {{# for(var i = 0, len = d.length; i < len; i++){ }}
    <div class="divImageMaterialContainer">
        <table class="tableImageMaterialContainer">
            <tr>
                <td height="150" align="center"><img style="max-width:166px; max-height:100%" src="{{ d[i].Url }}" /></td>
            </tr>
            <tr>
                <td height="30" valign="middle" bgcolor="#F4F5F9">
                    <div>
                        <div style="float: right; margin-right: 10px;">
                            <img src="/Content/Images/ico_remove.jpg" width="20" height="20" onclick="removeDetailImageItem('{{ d[i].Id }}')">
                        </div>
                        <div style="clear: both"></div>
                    </div>
                </td>
            </tr>
        </table>

    </div>

    {{# } }}
    <div style="clear:both"></div>

</script>


<div style="margin-left:20px; margin-right:20px; margin-top:20px;">
    <span id="spanTitle" class="font_black_24">信息</span>
</div>

<div style=" background-color:#ccc; margin-left:20px; margin-right:20px; margin-top:10px; height:1px;">
</div>

<div style=" position:absolute; overflow:auto ;margin-top:25px;left:30px; right:30px; bottom:60px; top:50px; ">

    <form id="form">
        <input type="hidden" id="txtId" />
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="110" height="36">名称：</td>
                <td><input id="txtName" name="txtName" type="text" class="input_16" style="width:96%; " maxlength="25" keyenter /></td>
            </tr>
            <tr>
                <td valign="top">
                    <div style="margin-top:5px;">
                        封面图片：
                    </div>
                </td>
                <td valign="top">
                    <div class="divBorder_gray" style="margin-bottom:5px;width:96%;">
                        <div style="padding:5px;">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="120"><img id="image" alt="" style="max-height:100px;" /></td>
                                    <td align="right">
                                        <input id="txtImageUrl" name="txtImageUrl" type="hidden" class="input_16" style="width:96%; " maxlength="500" keyenter />
                                        <a href="javascript:void(0)" onclick="uploadFile()">上传新图片</a><br />
                                        <a href="javascript:void(0)" onclick="removeImage()">删除图片</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            @*<tr>
                    <td height="36">&nbsp;</td>
                    <td><input id="txtImageUrl" name="txtImageUrl" type="text" class="input_16" style="width:96%; " keyenter /></td>
                </tr>*@
            <tr>
                <td width="110" height="36" valign="top">
                    <div style="margin-top:5px;">
                        详细图片：
                    </div>
                </td>
                <td>
                    <div class="divBorder_gray" style="margin-bottom:5px;width:96%;">
                        <div style="padding:5px;">
                            <div id="divImageListContainer">
                                @*<div style="float:left">
                                        <img src="http://wxcfile1.shengxunwei.com/FileStore/2a58d820-de07-4c8f-80b9-b5cb5a1028b4/eff4f12c-640d-4776-98be-0ccee007e9cf.jpg" />
                                    </div>
                                    <div style="clear:both"></div>*@
                            </div>
                            <div style="text-align:right"><a href="javascript:void(0)" onclick="uploadDetailImage()">上传新图片</a><br /></div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="110" height="36">电话：</td>
                <td><input id="txtPhoneNumber" name="txtPhoneNumber" type="text" class="input_16" style="width:96%; " maxlength="15" keyenter /></td>
            </tr>
            <tr>
                <td width="110" height="36">简要说明：</td>
                <td>
                    <textarea id='txtIntroduction' rows="3" style='width:96%; ' class="input_16" maxlength="150"></textarea>
                </td>
            </tr>
            <tr>
                <td width="110" height="36" valign="top">
                    <div style="margin-top:10px;">
                        详细说明：
                    </div>
                </td>
                <td>
                    <div style="width:96%; margin-top:10px;">
                        <div id="divDescriptionEditor" style='height:400px; '></div>
                    </div>
                </td>
            </tr>
            <tr>
                <td width="110">&nbsp;</td>
                <td>
                    <div style="width:96%;">
                        <div style="float:right;">
                            <input name="btnUpload" type="button" class="btn_white" id="btnUpload" value="上传图片" onclick="uploadDescriptionFile()" />
                        </div>
                        <div style="clear:both"></div>
                    </div>
                </td>
            </tr>
        </table>
    </form>

</div>

<div style=" background-color:#ccc; position:absolute; bottom:55px; left:20px;right:20px; height:1px;">

</div>

<div style="position:absolute; bottom:15px; left:20px;right:20px;">
    <div style="float:left;">
        <input name="btnRemove" type="button" class="btn_red" id="btnRemove" value="删 除" style="display:none" onclick="removeData()" />
    </div>

    <div style="float:right">
        <input name="btnSave" type="button" class="btn_blue" id="btnSave" value="保 存" onclick="save()" />
        <input name="btnCancel" type="button" class="btn_blue" id="btnCancel" value="取 消" onclick="cancel()" />
    </div>
    <div style="clear:both">
    </div>
</div>
@Helpers.FileUpload()